<template>
  <div id="userManagePage">
    <!-- 搜索表单区域 -->
    <!-- 使用 a-form 组件创建一个高级搜索表单，并绑定 model 属性到 searchForm 对象上 -->
    <a-form
      ref="formRef"
      name="advanced_search"
      layout="inline"
      class="ant-advanced-search-form"
      :model="searchQueryParams"
      @finish="handleSearch"
    >
      <!-- 账号输入框 -->
      <a-form-item name="userAccount" label="账号">
        <a-input v-model:value="searchQueryParams.userAccount" placeholder="请输入账号"></a-input>
      </a-form-item>

      <!-- 用户名输入框 -->
      <a-form-item name="userName" label="用户名">
        <a-input v-model:value="searchQueryParams.userName" placeholder="请输入用户名"></a-input>
      </a-form-item>
      <a-form-item>
        <!-- 查询按钮、重置按钮 -->
        <a-button type="primary" html-type="submit">查询</a-button>
        <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
      </a-form-item>
    </a-form>

    <a-divider></a-divider>
    <!-- 按钮位置 -->
    <div class="buttons">
      <a-button
        type="primary"
        :disabled="selectRowKeys.length <= 0"
        :loading="deleteLoading"
        @click="handleBatchDelete"
      >
        批量删除
      </a-button>
      <a-button type="primary" @click="handleAdd">添加</a-button>
    </div>

    <!-- 用户表格区域 -->
    <!-- 使用 a-table 组件展示用户列表数据  配置rowSelection选择框的时候 一定要同时配置 rowKey行的唯一键 不然会出现各种问题:例如:选中一行会导致所有行被选中-->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      :row-selection="rowSelection"
      rowKey="id"
      bordered
    >
      <!-- 定义表格中单元格的内容 -->
      <template #bodyCell="{ column, record }">
        <!-- 根据不同的列 dataIndex 显示不同内容 -->
        <template v-if="column.dataIndex === 'userAvatar'">
          <a-image :src="record.userAvatar" style="width: 50px"></a-image>
        </template>
        <template v-if="column.dataIndex === 'userRole'">
          <a-tag v-if="record.userRole === 'admin'" color="green">{{ record.userRole }}</a-tag>
          <a-tag v-else color="blue">{{ record.userRole }}</a-tag>
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          {{
            record.createTime !== null
              ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
              : '--'
          }}
        </template>
        <template v-if="column.dataIndex === 'updateTime'">
          {{ dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="您确定要删除这个数据吗?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <UserManageModal
      :visible="visible"
      :record="userInfo"
      :isEdit="isEdit"
      @success="resetSearch"
      @update:visible="(val) => (visible = val)"
    ></UserManageModal>
  </div>
</template>

<script lang="ts" setup>
import { computed, createVNode, onMounted, reactive, ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import {
  deleteBatchUserUsingPost,
  deleteUserUsingGet,
  searchPageUsingPost,
} from '@/api/userController.ts'
import dayjs from 'dayjs'
import { columns } from '@/pages/admin/user/UserManage.data.ts'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import UserManageModal from '@/pages/admin/user/components/UserManageModal.vue'

// 定义数据列表和总数变量，用于存储从后端获取的用户数据和总记录数
const dataList = ref([])
const total = ref(0)

// 定义选中的行的键值数组和选中的行数组，用于批量操作
const selectRowKeys = ref<number[]>([])
const selectRows = ref([])
// 定义表单引用，用于表单提交,重置等操作
const formRef = ref()

// 定义查询参数对象，用于分页及搜索条件传递给后端接口
const searchQueryParams = reactive<API.UserQueryRequest>({
  pageNum: 1,
  pageSize: 2, // 默认分页参数
})

// 计算属性：定义分页器配置，用于控制分页组件的行为
const pagination = computed(() => ({
  current: searchQueryParams.pageNum,
  pageSize: searchQueryParams.pageSize,
  total: total.value,
  showSizeChanger: true,
  showQuickJumper: true,
  onChange: (pageNum: number, pageSize: number) => {
    searchQueryParams.pageNum = pageNum
    searchQueryParams.pageSize = pageSize
    searchList()
  },
  showTotal: (total: number) => `共 ${total} 条数据`,
}))

// 通用重置函数，用于重置查询参数和选中的行
const resetQueryParams = () => {
  // 使用 a-form 提供的 resetFields 方法清空表单内容
  formRef.value.resetFields()
  selectRowKeys.value = []
  selectRows.value = []
  searchQueryParams.pageNum = 1 // 恢复默认分页参数
  searchQueryParams.pageSize = 2
}

// 处理搜索
const handleSearch = () => {
  searchList()
}

// 重置搜索
const resetSearch = () => {
  // 重置所有查询参数并重新加载数据
  resetQueryParams()
  searchList()
}

// 搜索列表
const searchList = async () => {
  // 根据当前查询条件请求用户数据，并更新数据列表和总记录数
  const res = await searchPageUsingPost(searchQueryParams)
  if (res.code === 0 && res.data) {
    dataList.value = res.data.records
    total.value = Number(res.data.total)
  }
}

const deleteLoading = ref(false)
// 删除单个用户：根据传入的用户 ID 向后端发送删除请求
const handleDelete = async (id: string) => {
  try {
    console.log('删除用户:', id)
    const res = await deleteUserUsingGet({ id })
    if (res.code === 0) {
      message.success('删除成功')
      await resetSearch() // 成功删除后刷新列表
    }
  } catch (error) {
    message.error('删除失败')
  }
}

// 批量删除用户：根据选中的用户 ID 列表向后端发送批量删除请求
const handleBatchDelete = async () => {
  Modal.confirm({
    title: '您确定要删除选中的数据吗？',
    icon: createVNode(ExclamationCircleOutlined),
    content: '',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      deleteLoading.value = true
      try {
        const res = await deleteBatchUserUsingPost(selectRowKeys.value)
        if (res.code === 0) {
          message.success('删除成功')
          resetSearch() // 成功删除后刷新列表
        } else {
          message.error('删除失败')
        }
      } finally {
        deleteLoading.value = false
      }
    },
    onCancel() {
      deleteLoading.value = false
      console.log('Cancel')
    },
  })
}

// 控制模态框显示/隐藏、编辑或新增用户的逻辑
const visible = ref(false)
const userInfo = ref(null)
const isEdit = ref(false)

async function handleAdd() {
  // 显示模态框
  visible.value = true
  userInfo.value = null // 新增时清空表单
  isEdit.value = false
}

const handleEdit = (record) => {
  // 显示模态框
  visible.value = true
  userInfo.value = record // 编辑时使用选中的记录
  isEdit.value = true
}

// 页面加载完成后自动执行一次查询以初始化用户列表
onMounted(() => {
  searchList()
})

// 计算属性：定义表格行选择配置，用于控制表格的选择行为
const rowSelection = computed(() => ({
  selectedRowKeys: selectRowKeys.value,
  onChange: (selectedKeys: number[], selectedRows: any[]) => {
    selectRowKeys.value = selectedKeys
    selectRows.value = selectedRows
  },
}))
</script>

<style scoped>
/* 可以根据需要添加更多样式 */
</style>
